import React from 'react';
import {
    View,
    StyleSheet,
    Text,
    TouchableOpacity,
    Image
} from 'react-native';
import {
    createBottomTabNavigator  
} from '@react-navigation/bottom-tabs';
import Home from './HomeTab';
import Shop from './ShopTab';
import Message from './MessageTab';
import Mine   from './MineTab';

import { launchImageLibrary,ImagePickerResponse,ImageLibraryOptions } from 'react-native-image-picker';

// import icon_tab_home_normal from '../../assets/icon_tab_home_normal.png';
// import icon_tab_home_selected from '../../assets/icon_tab_home_selected.png';
// import icon_tab_shop_normal from '../../assets/icon_tab_shop_normal.png';
// import icon_tab_shop_selected from '../../assets/icon_tab_shop_selected.png';
// import icon_tab_message_selected from '../../assets/icon_tab_message_selected.png';
// import icon_tab_message_normal from '../../assets/icon_tab_message_normal.png';
// import icon_tab_mine_selected from '../../assets/icon_tab_mine_selected.png';
// import icon_tab_mine_normal from '../../assets/icon_tab_mine_normal.png';
import icon_image  from '../../assets/icon_tab_publish.png';


const BottomTab = createBottomTabNavigator();
export default ()=>{
    const onPublishPress = ()=>{
        launchImageLibrary(
            {
                mediaType: 'photo',
                quality: 1,
                includeBase64: true
            },
            (res:ImagePickerResponse)=>{
                const {assets} = res;
                if(!assets?.length){
                    return;
                }
                const { uri,width, height,fileName,fileSize, type} = assets[0];
                
            }
        )

    }
    const  RedBookTabBar = ({state, descriptors, navigation}:any)=>{
        //routes 是所有的路由， index是当前选择的
        const {routes, index} = state;
            return (
                <View style={styles.tabBarContainer}>
                    {routes.map((route:any, i:number)=>{
                        //获取视图的options配置
                        const {options} = descriptors[route.key];
                        const label = options.title;
                        const isFocused = index === i;
                        if (i === 2){
                        return <TouchableOpacity 
                                style={styles.tarItem}
                                key={label}
                                onPress={onPublishPress}  
                                >
                                    <Image style={styles.publish} source={icon_image} />
                                </TouchableOpacity>
                         } else {
                            return <TouchableOpacity 
                                        style={styles.tarItem}
                                        key={label}
                                        onPress={()=>{
                                            navigation.navigate(route.name);
                                        }}  
                                    >
                                        <Text style={isFocused?styles.itemselect:styles.itemdefault}>{label}</Text>
                                    </TouchableOpacity>
                         }
                    })}
                </View>
            )

    }
    return (
        <View style={styles.root}>
            <BottomTab.Navigator
            //非自定义样式
            // screenOptions={({route}) => {
            //     return {
            //         tabBarIcon({focused, color, size}) {
            //             let img;
            //             if (route.name === 'Home'){
            //                     img = focused?icon_tab_home_selected:icon_tab_home_normal
            //             }else if (route.name === 'Shop'){
            //                 img = focused?icon_tab_shop_selected:icon_tab_shop_normal
            //             }else if (route.name === 'Message'){
            //                 img = focused?icon_tab_message_selected:icon_tab_message_normal
            //             }else if (route.name === 'Mine'){
            //                 img = focused?icon_tab_mine_selected:icon_tab_mine_normal
            //             }
            //             //tintColor 着色
            //             return <Image  style={{width:size, height: size, tintColor:color}} source={img}/>
            //         },
                
            //     }
            // }}

            //完全自定义样式
            tabBar={props => <RedBookTabBar {...props} />}
            >
                <BottomTab.Screen
                    name='Home'
                    component={Home} 
                    options={{
                        title: '首页',
                        headerShown: false
                    }}
                />
                <BottomTab.Screen
                    name='Shop'
                    component={Shop} 
                    options={{
                        title: '购物',
                        headerShown: false
                    }}
                />
                <BottomTab.Screen
                    name='Public'
                    component={Shop} 
                    options={{
                        title: '发布',
                        headerShown: false
                    }}
                />
                <BottomTab.Screen
                    name='Message'
                    component={Message} 
                    options={{
                        title: '消息',
                        headerShown: false
                    }}
                />
                <BottomTab.Screen
                    name='Mine'
                    component={Mine} 
                    options={{
                        title: '我'
                    }}
                    
                />
            </BottomTab.Navigator>

        </View>
        
    );
}
const  styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
  },
  tabBarContainer:{
    width: '100%',
    height: 64,
    flexDirection:'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  },
  tarItem:{
    flex: 1,
    height: '100%',
    justifyContent: 'center',
    alignItems:'center'
  },
  itemdefault:{
    fontSize: 16,
    color: '#999',
    fontWeight: 'normal'
  },
  itemselect:{
    fontSize: 18,
    color: '#333',
    fontWeight: 'bold'
  },
  publish:{
    width: 60,
    height: 48,
    resizeMode: 'contain'
  }
});